<template>
  <view class="icp-info">
    <viwe class="icp-domain">
      <!-- <view class="icp-desc">域名:</view> -->
      <uni-easyinput
        ref="domain"
        class="uni-mt-5"
        trim="all"
        :clearable="false"
        v-model="domain"
        placeholder="请输入查询的域名"
      />
      <van-button type="primary" size="small" @click="getIcpInfo"
        >点击查询</van-button
      >
    </viwe>
    <uni-card v-if="ICPInfo" padding="20rpx 0" :thumbnail="avatar">
      <view class="icp-info-item"
        >当前查询的网站域名为：{{ ICPInfo.domain }}</view
      >
      <view class="icp-info-item"
        >当前查询的网站备案号为：{{ ICPInfo.info.icp.split('-')[0] }}</view
      >
      <view class="icp-info-item"
        >当前查询的网站名称为：{{ ICPInfo.domain }}</view
      >
      <view class="icp-info-item"
        >当前查询的时间为：{{ ICPInfo.info.time }}</view
      >
      <view class="icp-info-item"
        >当前查询的网站主体许可证号为：{{ ICPInfo.info.icp }}</view
      >
      <view class="icp-info-item"
        >当前查询的网站备案主体性质为：{{ ICPInfo.info.nature }}</view
      >
      <view class="icp-info-item"
        >当前查询的网站备案分类为：{{ ICPInfo.info.title }}</view
      >
      <view class="icp-info-item"
        >当前查询的网站主体名称为：{{ ICPInfo.info.name }}</view
      >
    </uni-card>
  </view>
</template>

<script>
import mixin from "@/mixins/mixins.js";
export default {
  name: 'ICPInfo',
  mixins: [mixin],
  data() {
    return {
      domain: '', // 域名
      ICPInfo: null // 接收的数据
    }
  },
  methods: {
    async getIcpInfo() {
      // 如果没有输入内容，提示输入内容并选中输入框
      if (!this.domain) {
        this.$refs.domain.focus = true
        return this.$msg('请输入要查询的网站域名')
      }
      const res = await this.$http.get(`/icp?url=${this.domain}`)
      // 将对象转为数组
      if (res.success) {
        this.ICPInfo = res
        // console.log(this.ICPInfo)
      } else {
        return this.$msg(res.message + '或请确认网址是否输入正确')
      }
    },

  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-button {
  margin: 6rpx 10rpx;
}
.icp-info {
  .icp-domain {
    display: flex;
    margin-top: 20rpx;
    // .icp-desc {
    //   line-height: 68rpx;
    //   width: 80rpx;
    // }
  }
  &-item {
    margin: 20rpx 0;
    font-size: 26rpx;
    font-weight: 800;
  }
}
</style>
